<template>
  <div @click.stop="fileVerify = false" class="boxclass">
    <!-- 头部标题行 -->
    <el-row class="center_triangle">
      <el-col :span="24" style="background-color:#1a8dc4;color:white">
        <div class="header-header-title">
          <div class="text-width" @click.stop="fileVerify = true">
            M A N A G E M E N T
            <div class="file-div" v-if="fileVerify">
              <select-page @selects="selectsFun"></select-page>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 第一张owner行 -->
    <el-row>
      <el-col :span="6">
        <el-card style="width:100%" :body-style="{'float':'left','padding':'25px'}">
          <el-input v-model="Owner_text" style="border-width:0" size="mini">
            <template slot="prepend">Owner:</template>
          </el-input>
          <el-input v-model="BUAC_text" style="border-width:0" size="mini">
            <template slot="prepend">BU/AC:</template>
          </el-input>
        </el-card>
      </el-col>
      <el-col :span="2">
        <el-card :body-style="{'width':'100%','height':'130px','padding':'0px'}">
          <el-image :src="src" fit="cover" style="width:100%;height:100%"></el-image>
        </el-card>
      </el-col>
      <el-col :span="4">
        <div :style="{'width':'100%','height':'120px','padding':'10px','border':'none'}">
          <img src="../../assets/right .png" style="width:100px;height:100%" />
        </div>
      </el-col>
      <el-col :span="12">
        <el-card :body-style="{'width':'100%','height':'130px','padding':'10px'}">
          <el-input
            style="border-width:0"
            v-for="(item,i) in textdata"
            :key="i+70"
            v-model="item.value"
            size="mini"
          >
            <template slot="prepend">{{i+1+':'}}</template>
          </el-input>
        </el-card>
      </el-col>
    </el-row>
    <!-- 五管理信息卡牌页行 -->
    <el-row :gutter="0"> 
      <el-col :span="5" >
        <el-card :body-style="{'padding':'0px','height':'100px'}" object-fit:cove>
          <div
            slot="header"
            class="clearfix"
            style="background-color: #1a8dc4; width:100%;height:100%;color:white"
          >
            <span>Safety</span>
          </div>
          <div style="display:flex;height:100%">
            <div style="width:60%;">
              <el-input v-model="Owner_text" style="border-width:0;width:100%" size="mini">
                <template slot="prepend">Owner:</template>
              </el-input>
              <el-input
                v-model="BUAC_text"
                style="border-width:0;width:100%;padding-top:5px"
                size="mini"
              >
                <template slot="prepend">BU/AC:</template>
              </el-input>
            </div>
            <div style="width:40%">
              <el-card :body-style="{'width':'100%','height':'100px','padding':'10px'}">
                <el-image :src="src" fit="cover" style="width:100%;height:100%"></el-image>
              </el-card>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="5">
        <el-card :body-style="{'padding':'0px'}" object-fit:cove>
          <div
            slot="header"
            class="clearfix"
            style="background-color: #1a8dc4; width:100%;height:100%;color:white"
          >
            <span>Environment</span>
          </div>
          <div style="display:flex;height:100%">
            <div style="width:60%;">
              <el-input v-model="Owner_text" style="border-width:0;width:100%" size="mini">
                <template slot="prepend">Owner:</template>
              </el-input>
              <el-input
                v-model="BUAC_text"
                style="border-width:0;width:100%;padding-top:5px"
                size="mini"
              >
                <template slot="prepend">BU/AC:</template>
              </el-input>
            </div>
            <div style="width:40%">
              <el-card :body-style="{'width':'100%','height':'100px','padding':'10px'}">
                <el-image :src="src" fit="cover" style="width:100%;height:100%"></el-image>
              </el-card>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="5">
        <el-card :body-style="{'padding':'0px'}" object-fit:cove>
          <div
            slot="header"
            class="clearfix"
            style="background-color: #1a8dc4; width:100%;height:100%;color:white"
          >
            <span>Quality</span>
          </div>
          <div style="display:flex;height:100%">
            <div style="width:60%;">
              <el-input v-model="Owner_text" style="border-width:0;width:100%" size="mini">
                <template slot="prepend">Owner:</template>
              </el-input>
              <el-input
                v-model="BUAC_text"
                style="border-width:0;width:100%;padding-top:5px"
                size="mini"
              >
                <template slot="prepend">BU/AC:</template>
              </el-input>
            </div>
            <div style="width:40%">
              <el-card :body-style="{'width':'100%','height':'100px','padding':'10px'}">
                <el-image :src="src" fit="cover" style="width:100%;height:100%"></el-image>
              </el-card>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="5">
        <el-card :body-style="{'padding':'0px'}" object-fit:cove>
          <div
            slot="header"
            class="clearfix"
            style="background-color: #1a8dc4; width:100%;height:100%;color:white"
          >
            <span>Maintence</span>
          </div>
          <div style="display:flex;height:100%">
            <div style="width:60%;">
              <el-input v-model="Owner_text" style="border-width:0;width:100%" size="mini">
                <template slot="prepend">Owner:</template>
              </el-input>
              <el-input
                v-model="BUAC_text"
                style="border-width:0;width:100%;padding-top:5px"
                size="mini"
              >
                <template slot="prepend">BU/AC:</template>
              </el-input>
            </div>
            <div style="width:40%">
              <el-card :body-style="{'width':'100%','height':'100px','padding':'10px'}">
                <el-image :src="src" fit="cover" style="width:100%;height:100%"></el-image>
              </el-card>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card :body-style="{'padding':'0px'}" object-fit:cove>
          <div
            slot="header"
            class="clearfix"
            style="background-color: #1a8dc4; width:100%;height:100%;color:white"
          >
            <span>Logistics</span>
          </div>
          <div style="display:flex;height:100%">
            <div style="width:50%;">
              <el-input v-model="Owner_text" style="border-width:0;width:100%" size="mini">
                <template slot="prepend">Owner:</template>
              </el-input>
              <el-input
                v-model="BUAC_text"
                style="border-width:0;width:100%;padding-top:5px"
                size="mini"
              >
                <template slot="prepend">BU/AC:</template>
              </el-input>
            </div>
            <div style="width:50%">
              <el-card :body-style="{'width':'100%','height':'100px','padding':'10px'}">
                <el-image :src="src" fit="cover" style="width:100%;height:100%"></el-image>
              </el-card>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 五个箭头行 -->
    <el-row>
      <el-col :span="5" v-for="(item,index) in 5" :key="index+100" v-if="index<4">
        <div :style="{'width':'100%','height':'20px','padding':'0px','border':'none'}">
          <img src="../../assets/down.png" style="width:100px;height:100%;object-fit:contain;" />
        </div>
      </el-col>
      <el-col :span="4" v-if="index=4">
        <div :style="{'width':'100%','height':'20px','padding':'0px','border':'none'}">
          <img src="../../assets/down.png" style="width:100px;height:100%;object-fit:contain;" />
        </div>
      </el-col>
    </el-row>
    <!-- 五空白卡牌页行 -->
    <el-row :gutter="0">
      <el-col :span="5" v-for="item in 5" :key="item+100" v-if="item<5">
        <el-card :body-style="{'height':'115px','padding':'0px'}">
          <el-input
            v-for="(item,index) in Carddata"
            :key="index+22"
            v-model="item.value"
            style="border-width:0"
            size="mini"
          >
            <template slot="prepend">{{index+1+":"}}</template>
          </el-input>
        </el-card>
      </el-col>
      <el-col :span="4" v-if="item=5">
        <el-card :body-style="{'height':'115px','padding':'0px'}">
          <el-input
            v-for="(item,index) in Carddata"
            :key="index+33"
            v-model="item.value"
            style="border-width:0"
            size="mini"
          >
            <template slot="prepend">{{index+1+":"}}</template>
          </el-input>
        </el-card>
      </el-col>
    </el-row>
    <el-row class="center_triangle">
      <el-col :span="24" style="background-color:#1a8dc4;color:white">P e o p l e</el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <el-card style="width:100%" :body-style="{'float':'left','padding':'0px'}">
          <el-input v-model="Owner_text" style="border-width:0" size="mini">
            <template slot="prepend">Owner:</template>
          </el-input>
          <el-input v-model="BUAC_text" style="border-width:0" size="mini">
            <template slot="prepend">BU/AC:</template>
          </el-input>
        </el-card>
      </el-col>
      <el-col :span="2">
        <el-card :body-style="{'width':'100%','height':'80px','padding':'10px'}">
          <el-image :src="src" fit="cover" style="width:100%;height:100%"></el-image>
        </el-card>
      </el-col>
      <el-col :span="4">
        <div :style="{'width':'100%','height':'80px','padding':'10px','border':'none'}">
          <img src="../../assets/right .png" style="width:100px;height:100%" />
        </div>
      </el-col>
      <el-col :span="12">
        <el-card :body-style="{'width':'100%','height':'80px','padding':'10px'}">
          <el-input
            style="border-width:0"
            v-for="(item,i) in textdata"
            :key="i+70"
            v-model="item.value"
            size="mini"
          >
            <template slot="prepend">{{i+1+':'}}</template>
          </el-input>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import selectPage from "./select";
export default {
  name: "Management",
  components: {
    selectPage
  },
  data() {
    return {
      fileVerify: false,
      Owner_text: "",
      BUAC_text: "",
      src:
        "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
      textdata: [{ value: "检查" }, { value: "考勤" }, { value: "检查" }], //最上层左卡片文本数据
      Carddata: [{ value: "首选" }, { value: "然后" }, { value: "其次" }] //五个管理信息卡片页文本数据
    };
  },
  methods: {},
  created() {}
};
</script> 
<style scoped>
div >>> .el-card__header {
  padding: 0px;
}

.center_triangle {
  padding-top: 10px;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;
}
div >>> .el-input__inner {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #ffffff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #000000;
  display: inline-block;
  font-size: 16px;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 0px;
  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}
div >>> .el-input-group__prepend {
  background-color: #ffffff;
  color: #06577d;
  vertical-align: middle;
  display: table-cell;
  position: relative;
  border: 1px solid #ffffff;
  border-radius: 4px;
  padding: 0 10px;
  width: 1px;
  white-space: nowrap;
  padding-top: 5px;
  font-size: 14px;
}

.downarrow {
  width: 0;
  height: 0;
  border-width: 16px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
  position: relative;
  top: 20px;
}
.downarrow:after {
  content: " ";
  width: 16px;
  height: 16px;
  background-color: #333;
  position: absolute;
  top: -30px;
  left: -8px;
}

.header-header-title {
  width: 50%;
  text-align: left;
  font-weight: bold;
  letter-spacing: 2px;
  margin-left: 35%;
}
.text-width {
  width: 300px;
  text-align: center;
  position: relative;
  color: #325194;
  cursor: pointer;
}
.file-div {
  position: absolute;
  top: 20px;
  border: 1px solid #325194;
  left: 7vw;
  background-color: #fff;
  z-index: 96;
}
.boxclass {
  border: 1px solid #325194;
  margin-right: 2%;
  margin-left: 2%;
  padding: 1%;
  border-radius: 2%;
}
/* * {
  outline: 1px solid red;
} */
/* 盒子模型检查  */
</style>